<template>
    <!-- 歌手详情 -->
    <div class="singerdetails">
        <i @click="back" class="fa fa-chevron-circle-left cirleft" aria-hidden="true"></i>
        <!-- 异步数据先显示初始数据，再显示带数据的数据 error时加 v-if="写前两层"-->
        <div class="singer-top" v-if="singerDetail.artist">
            <img  :src="singerDetail.artist.cover" >
            <div class="singer-cont">
                <p>{{singerDetail.artist.name}}</p>
                <p>昵称 : {{singerDetail.user.nickname}}</p>
                <p>{{singerDetail.artist.identifyTag[0]}}</p>
            </div>
        </div>
        <list-title>歌手简介</list-title>
        <p class="introduction" v-if="singerDetail.artist">{{singerDetail.artist.briefDesc}}</p>

        <list-title>评论</list-title>
        <loading v-if="comment.length==0"></loading>
        <comment 
            :comment="comment"
        ></comment>
    </div>
</template>
<script>
import ListTitle from '@/components/ListTitle.vue'
import Comment from '@/components/Comment.vue'
export default {
    props:{
        singerid:[Number,String],  //歌手ID
    },
    data(){
        return {
            singerDetail:[],  //歌手详情
            comment:[], //存储评论数据
            commenttype:3,  //资源类型 , 对应 0歌曲 ,1 mv,2  歌单 ,3 专辑 ,4 电台,5 视频,6: 动态
        }
    },
    created(){
        /*异步数据问题
        异步数据先显示初始数据，再显示带数据的数据
        通俗的说: 三层表达式 a.b.c，在对象a中没有对象b，那么读取对象a.b.c中的值，自然会报错。
        如果是两层表达式a.b则不会报错，返回的是undefined
        解决: 用v-if="a.b" 判断
        */
        this.axios.get(`/artist/detail?id=${this.singerid}`)
        .then(result=>{
            this.singerDetail=result.data;
            // console.log("歌手详情==>",result.data);
          
        });
        
        // 新评论接口数据
        this.axios.get(`/comment/new?type=${this.commenttype}&id=${this.singerid}&sortType=3`).then(result=>{
            this.comment=result.data.comments;
            // console.log("rs=>",result.data.comments);
            // console.log("result==>",result);
        });

        // console.log("singerid==>",this.singerid)
    },
    
    // beforeRouteEnter(to,from,next){
    //     // console.log("beforeRouteEnter");  //验证缓存
    //     next(vm=>{
    //         vm.axios.get(`/comment/new?type=${vm.commenttype}&id=${vm.singerid}&sortType=3`).then(result=>{
    //             console.log("==>",result)
    //             vm.comment=result.data.comments;
    //             // console.log("rs=>",result.data.comments);
    //             // console.log("result==>",result);
    //         });
    //     })
    // },

    // 返回  编程式导航
    methods:{
        back(){
            this.$router.back();
        }
    },

    components:{
        ListTitle,
        Comment,  //评论组件
    }
}
</script>
<style lang="less" scoped>
.singerdetails{
    // 退出按钮
    .cirleft{
        font-size: 30px;
        color: rgb(180, 185, 185);
        display: inline-block;
        height: 40px;
        line-height: 40px;
        margin-left: 10px;
        position: fixed;
        z-index: 2;

    }
    // 图片和内容区
    .singer-top{
        position: relative;
        img{
            display: block;
            width: 100%;
        }
        // 图片中的内容
        .singer-cont{
            position: absolute;
            bottom: 15%;
            left: 10px;
            color: white;
            font-size: 13px;
            text-shadow: 0.5px 0.5px 1.5px #000;
            p:nth-child(1){
                font-size: 20px;
                color: rgb(255, 255, 255);
                padding: 10px 0px;
            }
            p:nth-child(2){
                color: #c8c8c8;
                padding: 5px 0px;
            }
            p:nth-child(3){
                color: #c8c8c8;
            }
        }
    }
    // 歌手简介
    .introduction{
        color: #666;
        padding: 0 16px 18px;
        line-height: 20px;
        font-size: 14px;
    }
    
}

</style>